<template>
    <view class="page-container">
        <!-- 顶部导航栏 -->
        <view class="nav-bar">
            <view class="back-button" @click="goBack">
                <image class="back-icon" src="/static/back-icon.png"></image>
            </view>
            <text class="page-title">个人中心</text>
        </view>

        <!-- 内容区域 -->
        <view class="content-area">
            <!-- 用户信息卡片 -->
            <view class="user-card">
                <view class="avatar-container">
                    <image class="user-avatar" :src="userInfo.avatar" @click="changeAvatar"></image>
                    <view class="avatar-edit">更换头像</view>
                </view>
                <view class="user-info">
                    <text class="user-person-name">{{ userInfo.name }}</text>
                    <text class="user-role">{{ userInfo.role }}</text>
                </view>
            </view>

            <!-- 个人信息编辑 -->
            <view class="info-section">
                <view class="section-header">
                    <text class="section-title">基本信息</text>
                    <text class="edit-btn" @click="editMode = !editMode">{{ editMode ? '完成' : '编辑' }}</text>
                </view>

                <view class="info-form">
                    <view class="form-item">
                        <text class="form-label">姓名</text>
                        <input v-if="editMode" class="form-input" type="text" v-model="userInfo.name"
                            placeholder="请输入姓名" />
                        <text v-else class="form-value">{{ userInfo.name }}</text>
                    </view>

                    <view class="form-item">
                        <text class="form-label">性别</text>
                        <picker v-if="editMode" class="form-picker" :range="genderOptions" @change="onGenderChange">
                            <view class="picker-value">{{ userInfo.gender }}</view>
                        </picker>
                        <text v-else class="form-value">{{ userInfo.gender }}</text>
                    </view>

                    <view class="form-item">
                        <text class="form-label">出生日期</text>
                        <picker v-if="editMode" class="form-picker" mode="date" @change="onBirthDateChange">
                            <view class="picker-value">{{ userInfo.birthDate }}</view>
                        </picker>
                        <text v-else class="form-value">{{ userInfo.birthDate }}</text>
                    </view>

                    <view class="form-item">
                        <text class="form-label">手机号码</text>
                        <input v-if="editMode" class="form-input" type="number" v-model="userInfo.phone"
                            placeholder="请输入手机号码" />
                        <text v-else class="form-value">{{ userInfo.phone }}</text>
                    </view>

                    <view class="form-item">
                        <text class="form-label">邮箱</text>
                        <input v-if="editMode" class="form-input" type="text" v-model="userInfo.email"
                            placeholder="请输入邮箱" />
                        <text v-else class="form-value">{{ userInfo.email }}</text>
                    </view>

                    <view class="form-item">
                        <text class="form-label">地址</text>
                        <textarea v-if="editMode" class="form-textarea" v-model="userInfo.address"
                            placeholder="请输入地址" />
                        <text v-else class="form-value">{{ userInfo.address }}</text>
                    </view>
                </view>

                <button v-if="editMode" class="save-btn" @click="saveUserInfo">保存信息</button>
            </view>

            <!-- 账号安全 -->
            <view class="info-section">
                <view class="section-header">
                    <text class="section-title">账号安全</text>
                </view>

                <view class="menu-list">
                    <view class="menu-item" @click="changePassword">
                        <text class="menu-text">修改密码</text>
                        <text class="menu-arrow">></text>
                    </view>
                    <!-- <view class="menu-item" @click="bindPhone">
                        <text class="menu-text">绑定手机</text>
                        <text class="menu-status">{{ userInfo.phone ? '已绑定' : '未绑定' }}</text>
                        <text class="menu-arrow">></text>
                    </view> -->
                </view>
            </view>

            <!-- 系统设置 -->
            <view class="info-section">
                <view class="section-header">
                    <text class="section-title">系统设置</text>
                </view>

                <view class="menu-list">
                    <view class="menu-item">
                        <text class="menu-text">主题颜色</text>
                        <view class="theme-selector">
                            <view class="theme-option" v-for="(theme, index) in themeOptions" :key="index"
                                :class="{ 'active-theme': settings.theme === theme.value }"
                                :style="{ backgroundColor: theme.color }" @click="changeTheme(theme.value)">
                            </view>
                        </view>
                    </view>
                    <view class="menu-item">
                        <text class="menu-text">字体大小</text>
                        <view class="font-size-selector">
                            <text class="font-size-btn" @click="changeFontSize('small')"
                                :class="{ 'active-font-size': settings.fontSize === 'small' }">小</text>
                            <text class="font-size-btn" @click="changeFontSize('medium')"
                                :class="{ 'active-font-size': settings.fontSize === 'medium' }">中</text>
                            <text class="font-size-btn" @click="changeFontSize('large')"
                                :class="{ 'active-font-size': settings.fontSize === 'large' }">大</text>
                        </view>
                    </view>
                    <view class="menu-item" @click="toggleNotification">
                        <text class="menu-text">消息通知</text>
                        <switch :checked="settings.notification" @change="onNotificationChange" color="#23804b" />
                    </view>
                    <view class="menu-item" @click="clearCache">
                        <text class="menu-text">清除缓存</text>
                        <text class="menu-arrow">></text>
                    </view>
                    <view class="menu-item" @click="about">
                        <text class="menu-text">关于我们</text>
                        <text class="menu-arrow">></text>
                    </view>
                </view>
            </view>

            <!-- 退出登录 -->
            <view class="logout-btn" @click="logout">退出登录</view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            editMode: false,
            userInfo: {
                name: '张喆聚',
                avatar: '/static/avatar-default.png',
                role: '患者用户',
                gender: '男',
                birthDate: '2002-01-11',
                phone: '13486566247',
                email: 'zhangzheju@qq.com',
                address: '江苏省苏州市虎丘区学府路99号'
            },
            genderOptions: ['男', '女', '其他'],
            settings: {
                notification: true,
                theme: 'default',
                fontSize: 'medium'
            },
            themeOptions: [
                { value: 'default', color: '#23804b' },
                { value: 'blue', color: '#1976d2' },
                { value: 'orange', color: '#ff8c00' },
                { value: 'purple', color: '#9c27b0' }
            ]
        }
    },
    methods: {
        goBack() {
            uni.navigateBack();
        },
        changeAvatar() {
            uni.chooseImage({
                count: 1,
                success: (res) => {
                    this.userInfo.avatar = res.tempFilePaths[0];
                    // 实际应用中应该上传头像到服务器
                    uni.showToast({
                        title: '头像更新成功',
                        icon: 'success'
                    });
                }
            });
        },
        onGenderChange(e) {
            this.userInfo.gender = this.genderOptions[e.detail.value];
        },
        onBirthDateChange(e) {
            this.userInfo.birthDate = e.detail.value;
        },
        saveUserInfo() {
            // 实际应用中应该将用户信息保存到服务器
            uni.showLoading({
                title: '保存中...'
            });

            setTimeout(() => {
                uni.hideLoading();
                uni.showToast({
                    title: '保存成功',
                    icon: 'success'
                });
                this.editMode = false;
            }, 1000);
        },
        changePassword() {
            uni.navigateTo({
                url: '/pages/userCenter/changePassword'
            });
        },
        bindPhone() {
            uni.navigateTo({
                url: '/pages/userCenter/bindPhone'
            });
        },
        toggleNotification() {
            this.settings.notification = !this.settings.notification;
            // 保存设置到本地
            this.saveSettings();
        },
        onNotificationChange(e) {
            this.settings.notification = e.detail.value;
            // 保存设置到本地
            this.saveSettings();
        },
        changeTheme(theme) {
            this.settings.theme = theme;
            // 应用主题颜色
            document.documentElement.style.setProperty('--theme-color', this.getThemeColor());
            // 保存设置到本地
            this.saveSettings();

            uni.showToast({
                title: '主题已更改',
                icon: 'success'
            });
        },
        getThemeColor() {
            const theme = this.themeOptions.find(t => t.value === this.settings.theme);
            return theme ? theme.color : '#23804b';
        },
        changeFontSize(size) {
            this.settings.fontSize = size;
            // 应用字体大小
            let fontSizeValue;
            switch (size) {
                case 'small':
                    fontSizeValue = '24rpx';
                    break;
                case 'large':
                    fontSizeValue = '32rpx';
                    break;
                default:
                    fontSizeValue = '28rpx';
            }
            document.documentElement.style.setProperty('--font-size-base', fontSizeValue);
            // 保存设置到本地
            this.saveSettings();

            uni.showToast({
                title: '字体大小已更改',
                icon: 'success'
            });
        },
        saveSettings() {
            // 保存设置到本地存储
            uni.setStorageSync('userSettings', JSON.stringify(this.settings));
        },
        loadSettings() {
            // 从本地存储加载设置
            const savedSettings = uni.getStorageSync('userSettings');
            if (savedSettings) {
                try {
                    this.settings = JSON.parse(savedSettings);
                    // 应用主题和字体大小
                    document.documentElement.style.setProperty('--theme-color', this.getThemeColor());
                    let fontSizeValue;
                    switch (this.settings.fontSize) {
                        case 'small':
                            fontSizeValue = '24rpx';
                            break;
                        case 'large':
                            fontSizeValue = '32rpx';
                            break;
                        default:
                            fontSizeValue = '28rpx';
                    }
                    document.documentElement.style.setProperty('--font-size-base', fontSizeValue);
                } catch (e) {
                    console.error('加载设置失败', e);
                }
            }
        },
        clearCache() {
            uni.showModal({
                title: '提示',
                content: '确定要清除缓存吗？',
                success: (res) => {
                    if (res.confirm) {
                        uni.showLoading({
                            title: '清除中...'
                        });

                        setTimeout(() => {
                            uni.hideLoading();
                            uni.showToast({
                                title: '缓存已清除',
                                icon: 'success'
                            });
                        }, 1000);
                    }
                }
            });
        },
        about() {
            uni.navigateTo({
                url: '/pages/userCenter/about'
            });
        },
        logout() {
            uni.showModal({
                title: '提示',
                content: '确定要退出登录吗？',
                success: (res) => {
                    if (res.confirm) {
                        // 实际应用中应该清除登录状态
                        uni.reLaunch({
                            url: '/pages/login/welcome'
                        });
                    }
                }
            });
        }
    },
    // 页面加载时初始化设置
    onLoad() {
        this.loadSettings();
    }
}
</script>

<style>
.page-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #f5f5f5;
}

.nav-bar {
    display: flex;
    align-items: center;
    padding: 20rpx 30rpx;
    /* background-color: #1aad19; */
    background: linear-gradient(135deg, #46bba0, #23804b);
    color: #fff;
    position: relative;
}

.back-button {
    padding: 10rpx;
}

.back-icon {
    width: 40rpx;
    height: 40rpx;
}

.page-title {
    flex: 1;
    text-align: center;
    font-size: 36rpx;
    font-weight: bold;
    margin-right: 60rpx;
    /* 为了平衡左侧返回按钮的宽度 */
}

.content-area {
    flex: 1;
    padding: 20rpx;
    overflow-y: auto;
}

/* 用户卡片样式 */
.user-card {
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 12rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.avatar-container {
    position: relative;
    margin-right: 30rpx;
}

.user-avatar {
    width: 150rpx;
    height: 150rpx;
    border-radius: 75rpx;
    border: 2rpx solid #f0f0f0;
}

.avatar-edit {
    position: absolute;
    width: 150rpx;
    bottom: 25rpx;
    left: 0;
    /* background-color: rgba(0, 0, 0, 0.6); */
    color: #1c6a3e;
    font-size: 24rpx;
    font-weight: 500;
    text-align: center;
    padding: 8rpx 0;
    /* border-bottom-left-radius: 150rpx; */
    /* border-bottom-right-radius: 150rpx; */
}

.user-info {
    flex: 1;
}

.user-person-name {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
    margin-right: 20rpx;
}

.user-role {
    font-size: 28rpx;
    color: #666;
    padding: 4rpx 15rpx;
    background-color: #f0f0f0;
    border-radius: 20rpx;
    display: inline-block;
}

/* 信息区域样式 */
.info-section {
    background-color: #fff;
    border-radius: 12rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15rpx;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 20rpx;
}

.section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
}

.edit-btn {
    font-size: 28rpx;
    color: #23804b;
}

/* 表单样式 */
.form-item {
    display: flex;
    margin-bottom: 20rpx;
    align-items: center;
}

.form-label {
    width: 160rpx;
    font-size: 28rpx;
    color: #666;
}

.form-value {
    flex: 1;
    font-size: 28rpx;
    color: #333;
}

.form-input,
.form-picker,
.form-textarea {
    flex: 1;
    height: 70rpx;
    border: 1px solid #e0e0e0;
    border-radius: 8rpx;
    padding: 0 20rpx;
    font-size: 28rpx;
}

.form-textarea {
    height: 120rpx;
    padding: 10rpx 20rpx;
}

.picker-value {
    height: 70rpx;
    line-height: 70rpx;
}

.save-btn {
    background-color: #23804b;
    color: #fff;
    border-radius: 40rpx;
    margin-top: 30rpx;
    font-size: 30rpx;
}

/* 菜单列表样式 */
.menu-list {
    background-color: #fff;
}

.menu-item {
    display: flex;
    align-items: center;
    padding: 25rpx 0;
    border-bottom: 1px solid #f0f0f0;
}

.menu-item:last-child {
    border-bottom: none;
}

.menu-text {
    flex: 1;
    font-size: 28rpx;
    color: #333;
}

.menu-status {
    font-size: 24rpx;
    color: #999;
    margin-right: 10rpx;
}

.menu-arrow {
    font-size: 28rpx;
    font-weight: bold;
    color: #999;
}

/* 主题选择器样式 */
.theme-selector {
    display: flex;
    align-items: center;
}

.theme-option {
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    margin-left: 15rpx;
    border: 2rpx solid #e0e0e0;
    transition: all 0.3s;
}

.active-theme {
    transform: scale(1.2);
    border: 2rpx solid #fff;
    box-shadow: 0 0 0 2rpx #23804b;
}

/* 字体大小选择器样式 */
.font-size-selector {
    display: flex;
    align-items: center;
}

.font-size-btn {
    width: 60rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    border-radius: 8rpx;
    margin-left: 10rpx;
    background-color: #f0f0f0;
    color: #666;
    font-size: 26rpx;
}

.active-font-size {
    background-color: #23804b;
    color: #fff;
}

/* 退出登录按钮 */
.logout-btn {
    background-color: #fff;
    color: #ff3b30;
    text-align: center;
    padding: 25rpx 0;
    border-radius: 12rpx;
    margin-top: 30rpx;
    font-size: 32rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}
</style>